<template>
  <view class="reader__left">
    <!-- #ifndef H5 -->
    <view
      :class="['reader__left-btns', 'listen', showMenu ? 'in' : 'out']"
      :style="{ color: themeConfig.leftBtnTextColor, background: themeConfig.leftBtnBackground }"
      @click="gotoListen"
    >
      <text class="iconfont icon-listen" />
    </view>
    <view
      :class="['reader__left-btns', 'fenxiang', showMenu ? 'in' : 'out']"
      :style="{ color: themeConfig.leftBtnTextColor, background: themeConfig.leftBtnBackground }"
      @click="openShare"
    >
      <text class="iconfont icon-fenxiang" />
    </view>
    <!-- #endif -->
  </view>
</template>

<script>
import { mapState, mapGetters } from "vuex";

export default {
  computed: {
    ...mapGetters(["themeConfig", "isIphoneX"]),
    ...mapState({
      bookid: state => state.reader.bookid,
      chapterNum: state => state.reader.chapterNum,
      showMenu: state => state.reader.showMenu,
      theme: state => state.reader.theme,
    }),
  },
  methods: {
    openShare() {
      this.$emit("open-share");
    },

    gotoListen() {
      uni.navigateTo({ url: `/pages/listen/index?book=${this.bookid}&chapter=${this.chapterNum}&num=0` });
    }
  }
}
</script>

<style lang="scss">
/* #ifndef H5 */
.reader {
  &__left-btns {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    width: 100rpx;
    height: 100rpx;
    border-radius: 50rpx;
    position: fixed;
    right: 30rpx;
    transition: margin-right 0.5s;

    &.listen {
      bottom: 580rpx;
    }

    &.fenxiang {
      bottom: 450rpx;
    }

    &.in {
      margin-right: 0rpx;
    }

     &.out {
      margin-right: -150rpx;
    }

    .iconfont {
      font-size: 48rpx;
    }

    &:active .iconfont {
      font-weight: bolder;
    }
  }
}
/* #endif */
</style>
